<template>
  <div class="slider" ref="slider">
    <div class="slider-group" ref="sliderGroup">
      <slot>
      </slot>


    </div>
    <!-- 点   -->
    <div class="dots">
      <span class="dot" :class="{active: currentPageIndex === index }"
            v-for="(item,index) in dots"  :key="index"></span>

    </div>

  </div>
</template>

<script>
import { addClass } from 'common/js/dom'
import BScroll from 'better-scroll'
export default {
  name: "slider",

  data () {
    return {
      dots: [],
      currentPageIndex: 0
    }
  },

  props: {
    loop: {
      type: Boolean,
      default: true
    },
    autoPlay: {
      type: Boolean,
      default: true
    },
    interval: {
      type: Number,
      default: 4000
    }
  },

  mounted(){
    setTimeout(() =>{
      this._setSliderWidth()
      this._initDots()
      this._initSlider()




      if (this.autoPlay) {
        this._play()
      }

    },20)
  },

  activated () {
    this.slider.enable()
    let pageIndex = this.slider.getCurrentPage().pageX
    this.slider.goToPage(pageIndex, 0, 0)
    this.currentPageIndex = pageIndex
    if (this.autoPlay) {
      this._play()
    }
  },
  deactivated () {
    this.slider.disable()
    clearTimeout(this.timer)
  },
  methods : {

    refresh () {
      if (this.slider) {
        this._setSliderWidth(true)
        this.slider.refresh()
      }
    },
    _setSliderWidth () {
       this.children = this.$refs.sliderGroup.children;
      let width = 0;
      let sliderWidth = this.$refs.slider.clientWidth;
      for (let i = 0; i<this.children.length;i++){
        let child = this.children[i];
        //每一个元素添加一个class
        addClass(child,'slider-item')
        child.style.width = sliderWidth + 'px';

        width += sliderWidth
      }


      if (this.loop){
        width += 2 * sliderWidth;
      }

      this.$refs.sliderGroup.style.width = width + 'px'
    },
    _initSlider () {
      this.slider = new BScroll(this.$refs.slider,{
        scrollX: true,
        scrollY: false,
        momentum: false,
        snap: {
          loop: this.loop,
          threshold: 0.3,
          speed: 400
        }
      })

      this.slider.on('scrollEnd', this._onScrollEnd)


      window.addEventListener('resize', () => {
        if (!this.slider || !this.slider.enabled) {
          return
        }
        clearTimeout(this.resizeTimer)
        this.resizeTimer = setTimeout(() => {
          if (this.slider.isInTransition) {
            this._onScrollEnd()
          } else {
            if (this.autoPlay) {
              this._play()
            }
          }
          this.refresh()
        }, 60)
      })
    },
    _play () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() =>{
        this.slider.next()
      },this.interval)
    },
    _onScrollEnd () {
      let pageIndex = this.slider.getCurrentPage().pageX
      this.currentPageIndex = pageIndex
      if (this.autoPlay) {
        this._play()
      }
    },
    _initDots () {
      this.dots = new Array(this.children.length)
    },


  }
}
</script>

<style scoped lang="stylus" >
@import "~common/stylus/variable"
.slider
  min-height: 1px
  position relative
  .slider-group
    position: relative
    overflow: hidden
    white-space: nowrap
    .slider-item
      float: left
      box-sizing: border-box
      overflow: hidden
      text-align: center
      a
        display: block
        width: 100%
        overflow: hidden
        text-decoration: none
      img
        display: block
        width: 100%
  .dots
    position: absolute
    right: 0
    left: 0
    bottom: 12px
    transform: translateZ(1px)
    text-align: center
    font-size: 0
    .dot
      display: inline-block
      margin: 0 4px
      width: 8px
      height: 8px
      border-radius: 50%
      background: $color-text-l
      &.active
        width: 20px
        border-radius: 5px
        background: $color-text-ll



</style>
